import React, { useState } from 'react';
import { Tabs, Table } from 'antd';
import { connect, useDispatch } from 'react-redux';
import musicAction from '@/store/action/music_action';
import { formatTimestamp } from '@/utils/dateFormat';
import style from './PlaylistTable.module.css';

const columns = (dispatch) => [
  {
    title: '歌曲',
    dataIndex: 'name',
    key: 'name', 
    render: (name, record) => {
      const playSong = (record) => {
        const { dt, al, ar, name, id } = record
        const songInfo = { songId: id, songName: name, picUrl: al.picUrl, duration: dt, artists: ar }
        dispatch(musicAction.getSongUrl(songInfo))
      }
      return (
        <div className={style.container}>
          <section>
            <span className={`iconfont icon-xihuan ${style.like}`}></span>
            <span>{name}</span>
          </section>
          <section className={style.container_icons}>
            <span className={`iconfont icon-bofang4 ${style.icons}`} onClick={() => playSong(record)}></span>
            <span className={`iconfont icon-tianjia1 ${style.icons}`}></span>
            <span className={`iconfont icon-xiazai ${style.icons}`}></span>
            <span className={`iconfont icon-gengduo ${style.icons}`}></span>
          </section>
        </div>
      )
    },
  },
  {
    title: '歌手',
    dataIndex: 'ar',
    key: 'ar',
    render: (ar) => ar.map(i => <span className={style.singer} key={i.id}>{i.name}</span>)
  },
  {
    title: '专辑',
    dataIndex: 'al',
    key: 'al',
    render: al => al.name
  },
  {
    title: '时长',
    dataIndex: 'dt',
    key: 'dt',
    render: dt => formatTimestamp(dt, 'mm:ss')
  },
]

function PlaylistTable({ songs, getSongUrl }) {
  console.log('组件 PlaylistTable - render');

  const [showIndex, setShowIndex] = useState(-1)
  const rowClass = (record, index) => {
    return index === showIndex ? style.rowClass : ''
  }
  const handleMouseEnter = (index) => {
    setShowIndex(index)
  }
  const handleMouseLeave = () => {
    setShowIndex(-1)
  }
  const handleDoubleClick = (record) => {
    const { dt, al, ar, name, id } = record
    const songInfo = { songId: id, songName: name, picUrl: al.picUrl, duration: dt, artists: ar }
    getSongUrl(songInfo)
  }
  const dispatch = useDispatch()
  const tableColumns = columns(dispatch)
  const items = [
    { key: '1', label: `歌曲${songs?.length}`, children: <Table 
      className={style.tableClass}
      rowClassName={rowClass}
      columns={tableColumns} 
      dataSource={songs} 
      rowKey='id' 
      pagination={false}
      onRow={(record, index) => {
        return {
          onDoubleClick: () => handleDoubleClick(record),
          onMouseEnter: () => handleMouseEnter(index),
          onMouseLeave: handleMouseLeave,
        }
      }}/>
    },
    { key: '2', label: '评论', children: 'Content of Tab Pane 2',},
  ]
  return (
    <div>
      <Tabs defaultActiveKey="1" items={items} />
    </div>
  )
}

const mapDispatchToProps = (dispatch) => {
  return {
    getSongUrl: (params) => dispatch(musicAction.getSongUrl(params)),
  }
}

export default connect(null, mapDispatchToProps)(PlaylistTable)
